<template>
		  <!-- #ifndef H5 -->
		<view :style="{height: statusHeight}" class="uni-status-bar">
		</view>
		<!-- #endif -->
	<view class="qinavbox">
		<view class="navboxleft iconfont" :class="navzuoicof" @tap="Tap_navout"><slot name="left"></slot></view>
		<view class="navbar"><slot name="center"></slot></view>
		<view class="navbarright  iconfont"><slot name="right"></slot> </view>
	</view>
</template>

<script setup>
	import {ref,onMounted} from 'vue'
	const Tap_navout = () =>{
		uni.navigateBack()
	}
	const props = defineProps({ 
		navzuoicof:{
					type:String,
					default:''
				},
	})
	let  statusHeight = ref(20)
	onMounted(() => { 
		statusHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
	})
</script>

<style lang="scss">
	
	.uni-status-bar{
		height: 20px;
	}
	.qinavbox{
	background: linear-gradient(to right,#3388ee, #4db9f1)  ;
	height: 50px;
	line-height: 50px;
	justify-content: center;
	align-items: center;
	padding: 0 20px;
	color: #F8F8F8;
	
    border: 0 none !important;
.navbar{
	flex: 1;
		text-align: center;
}
}
</style>
